<template>
  <view class="page">
    <!--  :rightText="'上' + navTitle"-->
    <u-navbar bgColor='#4871C0' :titleStyle="{ color: '#FFF'}" :title="navTitle+ '表'" leftIconColor="#FFF"
              @rightClick="rightClick"  :autoBack="true">
    </u-navbar>
    <view class="feedback add-week-feedback">
      <!-- 部门名称 -->
      <view class="department">
        <u-cell title="部门名称" :isLink="true" :value="org" style='border:0'  @click="openOrg" ></u-cell>
      </view>
      <!-- 本周工作小结 -->
      <view class="week-work-settle">
        <text>本周工作小结</text>
      </view>
      <!-- 表单 -->
      <view class="form">
        <view class="form-item">
          <text>领导交办项</text>
          <view class="">
            <u-textarea v-model="leader_content" placeholder="请输入领导交办项" class='textarea'></u-textarea>
          </view>
        </view>
        <view class="form-item">
          <text>完成情况</text>
          <view class="">
            <u--textarea v-model="end_content" placeholder="请输入完成情况" class='textarea'></u--textarea>
          </view>
        </view>
        <view class="form-item">
          <text>部门工作小结</text>
          <view class="">
            <u--textarea v-model="xiaojie" placeholder="请输入部门工作小结" class='textarea'></u--textarea>
          </view>
        </view>
      </view>
      <!-- 下周工作内容 -->
      <view class="week-work-settle" style="margin-top: 20rpx;">
        <text>下周工作内容</text>
      </view>
      <view class="form">
        <view class="form-item">
          <text >下周工作内容</text>
          <view class="">
            <u--textarea v-model="next_content" placeholder="请输入下周工作内容" class='textarea'></u--textarea>
          </view>
        </view>
      </view>
      <!--    附件-->
      <view class="week-work-settle" style="margin-top: 20rpx;">
        <text>附件</text>
      </view>
      <view class="form">
        <view class="form-item">
          <text >上传附件</text>
          <view class="">
            <u-upload :fileList="fileList1" previewImage="false" @afterRead="afterRead1" @delete="deletePic1"
                      accept="file" :maxCount="1"  name="1">
              <view class="content-box"  v-if="!show_files">
                <view  class="file-tip">上传附件</view>
              </view>
              <div style="position: relative" v-if="show_files">
                <div class="file-name "  @click.stop="handleDownload(files)">
                  <u-icon name="attach" color="#4871C0" size="24"></u-icon>
                  <label class="file-txt">{{files?files.filename:""}}</label>
                </div>
                <view class="new-tip"  @click="show_files  = !show_files;fileList1=[]">
                  更新
                </view>
              </div>

            </u-upload>
            <view class="tishititle" style="padding-left: 0;">仅支持上传word、excel、ppt、pdf、图片类型的文件</view>
          </view>
        </view>
      </view>
      <view class="submit" @click="submits()">
        <text>提交</text>
      </view>
      <u-popup :show="showOrg" mode="bottom" @close="closeOrg" @open="openOrg" :closeable="true" :border-radius="10"
               close-icon-color="#010101" :mask-close-able="false" close-icon-size="42">
        <view class="content" style="height:60%">
          <!-- <u-icon name="checkbox-mark" color="#4871C0" size="28"></u-icon> -->
          <view class="title">请选择牵头部门</view>
          <view  @click="selOrg(item)" :class="orgs==item.name?'meet active':'meet '" v-for="(item, i) in bumenlistall">
            {{item.name}}  <text>
            <img src="@/static/assets/images/dui.png" v-if="orgs==item.name" /></text>
          </view>
          <view class="btn">
            <u-button class='cancelbtn' @click="closeOrg">取消</u-button>
            <u-button type="primary" text="确定" @click="chooseOrg()" color='#4871C0'></u-button>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import UTabs from "../../uni_modules/uview-ui/components/u-tabs/u-tabs";
import UTabsItem from "../../uni_modules/uview-ui/components/u-tabs-item/u-tabs-item";
import UCollapse from "../../uni_modules/uview-ui/components/u-collapse/u-collapse";
import UCollapseItem from "../../uni_modules/uview-ui/components/u-collapse-item/u-collapse-item";
import UAvatar from "../../uni_modules/uview-ui/components/u-avatar/u-avatar";
import UImage from "../../uni_modules/uview-ui/components/u--image/u--image";
import UButton from "../../uni_modules/uview-ui/components/u-button/u-button";
import UDivider from "../../uni_modules/uview-ui/components/u-divider/u-divider";
import UText from "../../uni_modules/uview-ui/components/u--text/u--text";
import {
  getbumenList,
  submitItem
} from "../../api/feedbackApi";
import {departWeekDetail,adddepartweek} from "../../api/meetApi";
export default {
  name: "feedback",
  components: {UText, UDivider, UButton, UImage, UAvatar, UCollapseItem, UCollapse, UTabsItem, UTabs},
  data(){
    return {
      fileList1: [],
      files: null,
      fileName: null,
      show_files: false,
      planList:[],
      token:uni.getStorageSync('token')||'',
      navTitle: '周反馈',
      currentTab: 0,
      activeStyle: {
        color: '#4871c0'
      },
      inactiveStyle:{
        color: '#8b8b8b'
      },
      avatar: {
        url: 'https://cdn.uviewui.com/uview/album/1.jpg'
      },
      show: false,
      showOrg: false,
      org:"",
      array: ['请选择', '德育部门', '德育部门1', '德育部门2', '德育部门3'],
      columns: [['中国', '美国', '日本']],
      leader_content: '',
      end_content:'',
      xiaojie:'',
      next_content:'',
      bumenlistall:[],
      orgs:'',
      department_id:this.$route.query.department_id||'',
      meet_id:this.$route.query.id||'',
      department_ids:this.$route.query.department_id||'',
    }
  },
  methods: {
    // 点击附件预览
    handleDownload(item) {
      console.log("=====item",item)
      let params={
        url:item.fullurl, // 需要预览文件的地址(必填，可以使用相对路径)
        name:item.filename, // 需要预览文件的文件名(不填的话取url的最后部分)
        size:item.filesize,// 需要预览文件的字节大小(必填)
        type:item.mimetype
      }
      this.$store.dispatch('yulan',params)
    },
    // 新增文件
    async afterRead1(event) {
      let _this = this;
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this.fileList1.length
      console.log("=======this[`fileList${event.name}`]",this.fileList1,`fileList${event.name}`)
      lists.map((item) => {
        this.fileList1.push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise1(lists[i].url);
        console.log("result===>", result)
        var data = JSON.parse(result)
        if (data.code == 0) {
          _this.$toast(data.msg);
          this.fileList1.splice(event.index, 1)
          return false;
        }
        if(data.data){
          this.files = data.data.files;
          this.show_files = true;
          let item = this.fileList1.length
          this.fileList1.splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          this.fileList1.splice(fileListLen, 1)
          fileListLen++
        }
      }
    },
    uploadFilePromise1(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: this.$httpApi+'/api/common/upload', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          formData: {
            user: 'hy'
          },
          success: (res) => {
            console.log("uploadFile==>", res)
            setTimeout(() => {
              resolve(res.data)
            }, 1000)
          }
        });
      })
    },
    deletePic1() {
      this.fileList1.splice(event.index, 1)
      this.files = null;
      this.fileName = null;
    },
    rightClick(){
      uni.navigateBack()
    },
    openOrg() {
      this.showOrg = true;
    },
    closeOrg(){
      this.orgs = this.org;
      this.department_ids =this.department_id;
      this.showOrg = false;
    },
    chooseOrg(){
      this.org = this.orgs;
      this.department_id =this.department_ids
      this.showOrg = false;
    },
    selOrg(item) {
      this.orgs = item.name;
      this.department_ids = item.id;
    },
    bumenlist(){
      let params = {
        token:this.token
      }
      getbumenList(params).then(res => {
        this.isLoading = false;
        this.bumenlistall = res.data
        console.log(res)
      })
    },
    getdetail(){
      let params = {
        token:this.token,
        meet_id:this.meet_id,
        department_id:this.department_id
      }
      departWeekDetail( params).then(res => {
        this.isLoading = false;
        console.log(res)
        if(res.code == 1){
          if(res.data){
            //  有详情
            this.department_ids = res.data.department_id;
            this.department_id =  res.data.department_id;
            this.orgs = res.data.department_name;
            this.org =  res.data.department_name;
            this.leader_content=  res.data.leader_content;
            this.end_content=  res.data.end_content;
            this.xiaojie=  res.data.xiaojie;
            this.next_content=  res.data.next_content;
            this.files = res.data.files;
            if(this.files.fullurl){
              this.show_files = true
            }
          }else{
            // 新增
          }
        }
      })
    },
    submits() {
      if(!this.leader_content){
        uni.showToast({
          title: '请填写领导交办项',
          icon: 'none',
          duration: 1000
        });
        return;
      }
      if(!this.end_content){
        uni.showToast({
          title: '请填写完成情况',
          icon: 'none',
          duration: 1000
        });
        return;
      }
      if(!this.department_id){
        uni.showToast({
          title: '请选择牵头部门',
          icon: 'none',
          duration: 1000
        });
        return;
      }
      if(!this.xiaojie){
        uni.showToast({
          title: '请填写部门工作小结',
          icon: 'none',
          duration: 1000
        });
        return;
      }
      if(!this.next_content){
        uni.showToast({
          title: '请填写下周工作内容',
          icon: 'none',
          duration: 1000
        });
        return;
      }
      let params = {
        token:this.token,
        meet_id:this.meet_id,
        department_id:this.department_id,
        leader_content:this.leader_content,
        end_content:this.end_content,
        xiaojie:this.xiaojie,
        next_content:this.next_content,
        files:this.files
      }
      adddepartweek(params).then(res => {
        this.isLoading = false;
        console.log(res)
        if(res.code == 1){
          uni.showToast({
            title: res.msg,
            duration: 1000,
            icon:"none"
          });
          setTimeout(function() {
            uni.navigateBack({
              delta: 1
            });
          }, 2000)
        }
      })
    }
  },
  mounted() {
    this.bumenlist();
    this.getdetail();
  },
  onshow(){
  }
}
</script>

<style lang="scss" scoped>
$font-color: #4871c0;
.page {
  background: #F8F8F8;

  .feedback {
    .collapse {
      /deep/.u-collapse-item__content__text {
        padding: 0;
      }
      /deep/.u-divider {
        margin: 8px 0;
      }
      .label {
        color: $font-color;
        padding: 8px 12px;
        background-color: #F1F6FF;
      }
      .head {
        font-weight: bold;
        font-size: 15px;
        margin: 12px;
      }
      .content {
        display: contents;
        * {
          margin: 5px 10px;
          color: #666;
        }
      }
    }
  }
  .plan {
    padding: 15px;
    .date {
      background: transparent!important;
      height: auto!important;
    }
    .card {
      border-radius: 10px;
      margin: 20px 0;
      padding: 10px;
      background-color: #FFFFFF;
      .account {
        display: inline-flex;
        align-items: center;
        margin-bottom: 10px;
        .name {
          margin-left: 10px;
        }
      }
      .content {
        display: contents;
        * {
          line-height: 30px;
          .content-label {
            color: #8b8b8b;
            margin-right: 8px;
          }
          .attach {
            padding: 8px;
            background-color: #ebf2fd;
            /deep/ .u-text__prefix-icon{
              margin-right: 8px;
              color: #4871C0 !important;
            }
            /deep/.u-text__value{
              width: 100%;
              overflow: hidden;/*超出部分隐藏*/
            }
            /deep/.u-text__value>span{
              width: 100%;
              overflow: hidden;/*超出部分隐藏*/
              white-space: nowrap;/*不换行*/
              text-overflow:ellipsis;
            }
          }
        }
        .image {
          display: inline-flex;
          * {
            margin-right: 10px;
          }
        }
      }
      .btns {
        display: flex;
        width: fit-content;
        margin-left: auto;
        .btn {
          margin-left: 10px;
          border-radius: 10px;
          padding: 0 20px;
        }
      }
    }
  }
}
/deep/ .u-navbar__content__right__text {
  color: white;
}
@import "@/static/assets/css/index.css";
@import "@/static/assets/css/mobiscroll.core-2.5.2.css";
@import "@/static/assets/css/mobiscroll.animation-2.5.2.css";
@import "@/static/assets/css/mobiscroll.android-ics-2.5.2.css";
.add-week-feedback {
  /* width: 100%; */
  font-size: 28rpx;
  box-sizing: border-box;
  /* padding: 0 30rpx; */
  height: 100vh;
  background-color: #fff;

}

.department {
  width: 100%;
  height: 108rpx;
  line-height: 108rpx;
  color: #333;
}
.department-name {
  margin-left: 30rpx;
}
.department .right{
  width: 100rpx;
  height: 100%;
}

.week-work-settle {
  height: 52px;
  line-height: 52px;
  background-color: #F9F9F9;
  color: #999;
  padding-left: 30rpx;
}

.form {
  padding: 0 30rpx;
}
.form-item text {
  height: 44rpx;
  line-height: 44px;
  color: #4871C0;
}
.textarea{
  background-color: #F9F9F9;
  padding: 10rpx 15rpx;
}
.submit {
  overflow: hidden;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #4871C0;
  text-align: center;
  color: #fff;
  margin: 88rpx 24rpx 20rpx;
  font-size: 32rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.addplan{
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 1000;
}
/deep/.u-text{
  width: 96% !important;
}
.content-box {
  width: calc(100vw - 56rpx);
  min-height: 92rpx;
  background-color: #f8f8f8;
  border-radius: 8px 8px 8px 8px
}

.file-tip {
  padding: 30rpx;
  width: calc(100vw - 48pt);
  font-size: 28rpx;
  font-weight: 500;
  color: #999999;
}

.file-name {
  padding: 10px;
  background: #F8F9FC;
  border-radius: 8px 8px 8px 8px;
  position: relative;
}

.new-tip {
  position: absolute;
  right: 0px;
  top: 0;
  width: 30px;
  text-align: center;
  height: 16px;
  background: #FF7A00;
  border-radius: 0px 8px 0px 4px;
  font-size: 8px;
  color: #ffffff;
}

.file-name {
  padding: 10px;
  border-radius: 8px 8px 8px 8px;
  display: flex;
  position: relative;
  width: 86vw;
  font-size: 30rpx;
  color: #4871C0;
  line-height: 24px;
  /* margin-left: 3.5vw; */

}
</style>
